<template>
  <div class="column">
    <div>
      <y-notification :value="15">
        <y-notification-list :list="listO" :actions="actions"
                             @handleClickItem="handleClickItem" @handleClickAction="handleClickAction"> </y-notification-list>
      </y-notification>
    </div>
<!--    <div>-->
<!--      <y-notification :value="100"></y-notification>-->
<!--    </div>-->
<!--    <div>-->
<!--      <y-notification :value="9" isDot>-->
<!--        -->
<!--      </y-notification>-->
<!--    </div>-->
<!--    <div>-->
<!--      <y-notification :value="9" icon="ChatRound">-->
<!--       -->
<!--      </y-notification>-->
<!--    </div>-->
  </div>

</template>

<script setup lang="ts">
  import {list, actions} from "./data"

  const listO = ref(list)

  const handleClickItem = (val: object) => {
    console.log('item=>',val)
  }
  const handleClickAction = (val: any) => {
    console.log('action =>',val)
  }
</script>

<style scoped lang="scss">
.column{
  display: flex;
  flex-direction: column;
  >div{
    margin-bottom: 30px;
  }
}
</style>
